<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>

        <!-- 操作 -->
        <div class="header">
            <div class="part-left">
                <div class="block">
                    <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" size="small" type="daterange"
                        range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" />
                </div>
                <div class="block">
                    <el-input v-model="kw" style="border-radius: 100%; width: 250px" size="small" placeholder="请输入手机号进行搜索">
                        <el-button slot="append" icon="el-icon-search" @click="doSearch" />
                    </el-input>
                    <el-button v-if="search_kw" type="text" size="small" @click="clearKw">清空</el-button>
                </div>
            </div>

            <div class="part-right">
                <el-button icon="el-icon-refresh" size="small" type="default" :disabled="loading"
                    @click="loadData">刷新数据</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <!-- 列表 -->
        <el-table :data="message" element-loading-text="正在加载用户列表" fit :highlight-current-row="true" size="medium ">
            <el-table-column prop="id" label="#" width="80"></el-table-column>
            <el-table-column prop="to" label="收信号码" width="120"></el-table-column>
            <el-table-column prop="content" label="短信内容"></el-table-column>
            <el-table-column prop="created_at" label="发送时间" ></el-table-column>
            <el-table-column prop="res" label="状态">
                <template slot-scope="scoped">
                    <span v-if="scoped.row.res.code == 0 || scoped.row.res.code == 'Ok' || scoped.row.res.code == 'OK'">发送成功</span>
                    <el-tag size="mini" type="danger" @click="showErrorMes(scoped.row.res)" v-else>
                        <i class="el-icon-warning" />点击查看错误详情</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="res" label="操作" width="100">
                <template slot-scope="scoped">
                    <el-button type="text" plain round icon="el-icon-message" size="mini" :disabled="loading" :loading="loading"
                        @click="resendHandle(scoped.row.id)">重发</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pager">
            <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
                :page-sizes="[10, 20, 50, 100]" :page-size="per_page" @current-change="updateCurrentPage"
                @size-change="updatePageSize" />
        </div>
        <el-dialog :visible.sync="showError" title="错误详情" width="50%">
            <ShowCode :code="errorMes"></ShowCode>
        </el-dialog>
    </div>
</template>

<script>
import { getSmsLogs, resendSms } from "@/api/sms";
import UdCard from "@/components/UdCard";
import ShowCode from "@/components/ShowCode";
export default {
    name: "sms",
    props: { btns: { type: Object } },
    components: { UdCard, ShowCode },
    data () {
        return {
            dateRange: null,
            loading: true,
            message: [],
            per_page: 20,
            current_page: 1,
            kw: "",
            search_kw: "",
            total: 0,
            showError: false,
            errorMes: '',
        };
    },
    mounted () {
        this.loadData();
    },
    watch: {
        dateRange: function (newValue, oldValue) {
            this.current_page = 1;
            this.loadData();
        },
        current_page (newVal, oldVal) {
            this.loadData();
        },
        per_page (nweVal, oldVal) {
            this.loadData();
        },
    },

    computed: {
        date_range_str: function () {
            if (!this.dateRange) {
                return "";
            }
            // var d1 = this.formtDateValue(this.dateRange[0]);
            // var d2 = this.formtDateValue(this.dateRange[1]);
            var d1 = this.dateRange[0];
            var d2 = this.dateRange[1];
            return d1 + "," + d2;
        },
    },
    methods: {
        showErrorMes(mes){
            this.errorMes = JSON.stringify(mes, null, 2);
            this.showError = true;
        },
        // 获取数据
        resendHandle: function (sid) {
            this.loading = true;
            resendSms(sid).then((resp) => {
                this.loading = false;
                this.$message.success("已尝试重发");
                var sms = resp.data;
                this.loadData();
            });
        },
        loadData () {
            this.loading = true;
            var _this = this;
            getSmsLogs({
                date_range: this.date_range_str,
                page: _this.current_page,
                per_page: _this.per_page,
                kw: _this.kw || "",
            }).then((resp) => {
                this.loading = false;
                this.message = resp.data.data.map((item, i) => {
                    // item.created_time = this.formtDateValue(item.created_at);
                    try {
                        item.res = JSON.parse(item.res);
                    } catch (err) {
                        item.res = {
                            code: 0,
                            msg: "成功",
                            result: { count: 1, fee: 0.05, sid: 49524273488 },
                        };
                    }
                    return item;
                });
                _this.total = resp.data.page.total_items;
                _this.loading = false;
            });
        },
        doSearch: function () {
            this.loading = true;
            this.current_page = 1;
            this.search_kw = this.kw;
            this.loadData();
        },
        clearKw: function () {
            this.kw = "";
            this.search_kw = "";
            this.loadData();
        },
        updateCurrentPage (page) {
            this.current_page = page;
        },
        updatePageSize (size) {
            this.per_page = size || 10;
        },
        // 时间过滤器
        formtDateValue: function (e) {
            var time = new Date(e);
            var v = time.toLocaleDateString();
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var date = y + "-" + m + "-" + d;
            return date;
        },
    },
};
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0px;
    // border-bottom: 0.2px solid #ebeef5;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .block {
        margin-right: 10px;
    }
}
</style>
